<script setup lang="ts">
import { storeToRefs } from 'pinia';

import { link1688stor } from '#/store';

import FooterButton from './components/footerButton.vue';
import PipeiSku from './components/pipeiSku.vue';
import Prdinfo from './components/prdinfo.vue';
import Topprdls from './components/topprdls.vue';
import Useskubox from './components/useskubox.vue';

const link1688 = link1688stor();
// deteail
const { getdeteailLoading, showLinkSkuStatus, selectItemContent } =
  storeToRefs(link1688);
</script>

<template>
  <div>
    <a-modal
      :visible="link1688.showIsLinkBindStatus"
      bodt-class="bouernghser"
      class="asnjehr"
      style="top: 50px; width: 1400px; padding: 0"
      title="关联商品"
      @cancel="link1688.showIsLinkBindStatus = false"
      @ok="link1688.showIsLinkBindStatus = false"
    >
      <template #footer>
        <FooterButton />
      </template>
      <a-spin :spinning="getdeteailLoading">
        <Prdinfo />
        <!-- <Uselinkbox /> -->

        <Topprdls />
        <Useskubox />
      </a-spin>
    </a-modal>
    <a-modal
      :visible="showLinkSkuStatus"
      width="800px"
      @cancel="showLinkSkuStatus = false"
      @ok="link1688.selectendfn"
    >
      <template #title>
        <a-space>
          <div>匹配SKU</div>
          <div v-if="selectItemContent.skuValue" class="text-xs">
            sku: {{ selectItemContent.skuValue }}
          </div>
          <div v-if="selectItemContent.stockNum" class="text-xs">
            库存{{ selectItemContent.stockNum }}
          </div>
          <div v-if="selectItemContent.priceStr" class="text-xs">
            价格：¥{{ selectItemContent.priceStr }}
          </div>
        </a-space>
      </template>
      <PipeiSku />
    </a-modal>
  </div>
</template>
<style lang="scss">
.asnjehr {
  // .ant-modal-content {
  //   padding: 0;
  // }
  .bouernghser {
    height: 700px;
    padding: 0;
  }
}
</style>
